<template>
  <view class="content">
    <view class="wrap">
      <transition name="test">
        <view class="div" v-if="show"></view>
      </transition>
    </view>
    <button @click="show = !show">切换</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
</script>

<style>
.wrap {
  height: 100rpx;
  padding: 12rpx;
}
.div {
  width: 100rpx;
  height: 100rpx;
  background-color: #42b983;
  border-radius: 4rpx;
}
.test-enter-active,
.test-leave-active {
  transition: all 0.5s ease;
}

.test-enter-from,
.test-leave-to {
  opacity: 0;
  /* scale: 0.5; */
  transform: translateX(100%);
}
</style>
